<template>
	<drawer 
		:show="show" 
		:title="title"
		:showBtns="true"
		:showCancle="true"
		:confirmText="comfireText"
		cancelText="重置"
		@close="bindClose"
		@cancel="handleReset"
		@confirm="submit"
	>
		<view class="filter-content">
			<!-- 全部选项 -->
			<view class="filter-all" v-if="opt.isShowAll">
				<view 
					:class="['tag', allChecked ? 'act' : '']" 
					@click="chooseAll"
				>
					全部
				</view>
			</view>

			<!-- 筛选项列表 -->
			<filter-item
				v-for="(item, index) in filteredList"
				:key="index"
				:show="true"
				:label="item.title"
				:options="item.list"
				:value="choosed[item.key] || []"
				:multiple="item.key !== 'date'"
				@input="(value) => handleFilterChange(item.key, value)"
				@change="(value) => handleFilterChange(item.key, value)"
			>
				<!-- 日期筛选的特殊处理 -->
				<template v-slot:default v-if="item.key === 'date'">
					<view class="filter-date">
						<view class="filter-date-tags">
							<view 
								:class="['dateTag', getChooseStatus(item, it) ? 'act' : '']" 
								@click="chooseTag(item.key, it)" 
								v-for="(it, idx) in item.list" 
								:key="idx"
							>
								{{ it.name }}
							</view>
						</view>
						<view class="filter-date-custom">
							<view :class="['dateTag', startTime ? 'act' : '']" @click="showCalendar">
								<input placeholder="开始时间" disabled v-model="startTime" />
							</view>
							<view class="line">-</view>
							<view :class="['dateTag', endTime ? 'act' : '']" @click="showCalendar">
								<input type="number" v-model="endTime" placeholder="结束时间" disabled />
							</view>
						</view>
					</view>
				</template>
			</filter-item>
		</view>

		<!-- 时间选择弹框 -->
		<time-select 
			:defTime="[startTime, endTime]" 
			:beforeToday="true" 
			:atterToday="true" 
			v-if="selectTimePopup" 
			@close="closeSelectTimePopup"
		/>
	</drawer>
</template>

<script>
import Drawer from '@/subpages/rescue/components/drawer.vue';
import FilterItem from '@/subpages/rescue/components/filter-item.vue';
import timeSelect from '@/pages/index/components/timeSelect.vue';
import { getNowTime } from '@/utils/utils.js';

export default {
	name: 'filter-drawer',
	components: { 
		Drawer,
		FilterItem,
		timeSelect 
	},
	props: {
		chooseData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		border: {
			// 是否显示边框
			type: Boolean,
			default: false
		},
		filterList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		show: {
			type: Boolean,
			default: true
		},
		comfireText: {
			type: String,
			default: '确认'
		},
		keyMap: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		// 标题名称,默认筛选
		title: {
			type: String,
			default: '筛选'
		},
		// 是否显示全部按钮,默认显示
		isShowAll: {
			type: Boolean,
			default: true
		},
		// 页面入口来源,如果从个人中心进来,不需要时间
		orgin: {
			type: String || Number,
			default: 0
		}
	},
	data() {
		return {
			choosed: {},
			allChecked: false,
			showMap: {},
			startTime: '',
			endTime: '',
			selectTimePopup: false
		};
	},

	computed: {
		opt() {
			return {
				isShowAll: this.isShowAll
			};
		},
		filteredList() {
			return this.filterList.filter(item => this.fitlerContract(item));
		}
	},

	watch: {
		keyMap(val) {
			this.showMap = val;
		}
	},

	created() {
		this.choosed = this.chooseData;
	},

	methods: {
		// 处理筛选项变化
		handleFilterChange(key, value) {
			// 日期筛选单独处理
			if (key === 'date') return;
			
			this.choosed[key] = value;
			
			// 如果全选状态，取消全选
			if (this.allChecked) {
				this.allChecked = false;
			}

			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed
			});
		},

		showCalendar() {
			this.selectTimePopup = true;
			console.log('展示日历弹框');
		},

		// 自定义日期
		closeSelectTimePopup(res) {
			if (res) {
				console.log('自定义日期', res);
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '-');
					end = timeArr[1].replaceAll('.', '-');
				} else {
					const time = res.replaceAll('.', '-');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let endtime = new Date(end).getTime();
				if (endtime >= nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}

				this.startTime = start;
				this.endTime = end;
				this.choosed['date'] = [];
			}
			this.selectTimePopup = false;
		},

		fitlerContract(item) {
			let flag = true;
			if (item.key == 'contractStatus') {
				flag = this.findRoute('mystatistics_contract');
			}
			return flag;
		},

		initData(obj) {
			this.choosed = obj;
		},

		// 获取是否选中
		getChooseStatus(item, it) {
			if (this.choosed && this.choosed[item.key] && this.choosed[item.key].length > 0) {
				if (this.choosed[item.key].indexOf(it.value) != -1) {
					return true;
				}
			}
			return false;
		},

		// 选中某个标签
		chooseTag(key, it) {
			// 如果是全选全选关闭
			if (this.allChecked) {
				this.allChecked = false;
			}

			if (this.choosed[key]) {
				let idx = this.choosed[key].indexOf(it.value);
				if (idx == -1) {
					// 如果日期已经选了
					if (key == 'date') {
						this.choosed[key][0] = it.value;
						this.startTime = this.endTime = '';
					} else {
						this.choosed[key].push(it.value);
					}
				} else {
					this.choosed[key].splice(idx, 1);
				}
			} else {
				this.choosed[key] = [it.value];
			}

			this.$forceUpdate();

			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed
			});
		},

		// 全选
		chooseAll() {
			this.choosed = {};
			this.allChecked = !this.allChecked;
			this.$emit('chooseTag', { allChecked: this.allChecked, choosed: this.choosed });
		},

		// 确定
		async submit() {
			this.$emit('submit', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				parentArr: this.parentArr,
				keyMap: this.showMap
			});
		},

		bindClose() {
			this.$emit('closed', 1);
		},

		// 点击重置
		handleReset() {
			let len = Object.keys(this.choosed).length;
			if (len !== 0) {
				for (let key in this.choosed) {
					this.choosed[key] = [];
					this.$forceUpdate();
				}
				this.choosed = {};
			}
			if (this.allChecked) {
				this.allChecked = false;
			}
			if (this.startTime) {
				this.startTime = this.endTime = '';
			}
			this.$emit('chooseTag', { allChecked: false, choosed: this.choosed });
		}
	}
};
</script>

<style lang="scss" scoped>
.filter-content {
	padding: 0 32rpx;
}

.filter-all {
	padding: 24rpx 0 10rpx 0;
	
	.tag {
		padding: 4rpx 24rpx;
		border: 2rpx solid #cccccc;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #666666;
		transition: 0.3s all;
		display: inline-block;
		
		&.act {
			color: #0091ff;
			border-color: #0091ff;
		}
	}
}

.filter-date {
	.filter-date-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		
		.dateTag {
			padding: 4rpx 24rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
			font-size: 28rpx;
			color: #666666;
			transition: 0.3s all;
			
			&.act {
				color: #0091ff;
				border-color: #0091ff;
			}
		}
	}
	
	.filter-date-custom {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.dateTag {
			display: flex;
			flex: 1;
			justify-content: center;
			height: 48rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666666;
			transition: 0.3s all;
			margin-right: 20rpx;
			
			&.act {
				color: #0091ff;
				border-color: #0091ff;
			}
			
			input {
				text-align: center;
				width: 100%;
				height: 100%;
				border: none;
				background: transparent;
			}
		}
		
		.line {
			width: 68rpx;
			display: flex;
			align-items: center;
			color: #666;
			justify-content: center;
		}
	}
}
</style>
